<script setup lang="ts">
type PropsType = {
  name: string
}
defineProps<PropsType>()
</script>

<template>
  <div>
    <svg class="custom-svg-icon" aria-hidden="true">
      <use :href="`#icon-${name}`" />
    </svg>
  </div>
</template>

<style scoped lang="scss">
.custom-svg-icon {
  //知识点【1em单位】：em 是相对于当前元素的字体大小，如果某个元素的 font-size 是 16px，那么 1em 就等于 16px
  //设置它是为了让 SVG 图标的宽度和高度与当前上下文的字体大小保持一致，可以随着上下文字体改变而改变，而不用单独设置svg大小
  width: 1em;
  height: 1em;
}
</style>
